<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>1-组件实例-自定义下拉框</title>
    <link rel="stylesheet" type="text/css" href="css/style.css">
    <script src="js/vue.js"></script>
</head>

<body>
    <div id="app">
        <h2>自定义下拉框组件</h2>
        <custom-select></custom-select>

        <h2>自定义下拉框2</h2>
        <custom-select></custom-select>
    </div>


    <script>
        Vue.component('custom-select', {
            template: `
            <section class="warp">
                <div class="searchIpt clearFix">
                    <div class="clearFix">
                        <input type="text" class="keyWord" value="" />
                        <input type="button" value="GO">
                        <span></span>
                    </div>
                    <ul class="list">
                        <li>html+css</li>
                        <li>html5+css3</li>
                        <li>javascript</li>
                        <li>angular</li>
                        <li>react</li>
                        <li>vue</li>
                        <li>jquery</li>
                        <li>nodejs</li>
                    </ul>
                </div>
            </section>`
        })


        new Vue({
            el: "#app"
        })

        var keyWord = document.querySelector('.keyWord');
        var list = document.querySelector('.list');
        var lis = list.querySelectorAll('li');

        keyWord.onfocus = function() {
            list.style.display = 'block';
        }

        keyWord.onblur = function() {
            setTimeout(function() {
                list.style.display = 'none';
            }, 80);
        }

        for (var i = 0; i < lis.length; i++) {
            lis[i].onclick = function() {
                for (var i = 0; i < lis.length; i++) {
                    lis[i].className = '';
                }
                this.className = 'active';
                console.log(this.innerHTML);
                keyWord.value = this.innerHTML;
            }
        }
    </script>
</body>

</html>